<template>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="ScreenShot" name="first">
      <suspense>
        <screen-shot/>
      </suspense>
    </el-tab-pane>
    <el-tab-pane label="NoteTool" name="second">
      <suspense>
        <note-tool/>
      </suspense>
    </el-tab-pane>
    <el-tab-pane label="StayFoced" name="third">
  <suspense>
    <stay-focused/>
  </suspense>
</el-tab-pane>
    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
  </el-tabs>
</template>

<style>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
  width: 500px;
  height: auto;
}
</style>

<script setup lang="ts">
import mavonEditor from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
import {reactive, ref} from "vue"
import type {App} from "vue"
import ElementPlus from "element-plus"
import 'element-plus/dist/index.css'
import type {TabsPaneContext} from 'element-plus'
import ScreenShot from "~popup/components/ScreenShot.vue"
import NoteTool from "~popup/components/NoteTool.vue"
import StayFocused from "~popup/components/StayFoced.vue"
const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

defineOptions({
  prepare(app: App) {
    // Use any plugins here:
    // app.use
    app.use(ElementPlus)
    app.use(mavonEditor)
  }
})
</script>